<template>
  <div class="element-table-root">
    <el-row>
      <el-col :span="24">
        <div class="btn-group-el">
          <btn-group :currentSelectedData="currentSelectedData" @btnClickCallback="btnClickCallback"></btn-group>
        </div>
        <div class="element-table-content">
          <div class="element-table-body">
            <app-table
            :page-data="pageData"
            :table-columns="tableColumns"
            v-on:currentChange="handleCurrentChange"
            v-on:handleCheckedRows="handleCheckedRows" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :before-close="cancel" :close-on-click-modal="false">
      <el-form :model="formData" :disabled="showOnly" label-width="120px" size="mini">
        <el-form-item label="名称" >
          <el-input  v-model="formData.keyName" placeholder="请输入字典索引名称" ></el-input>
        </el-form-item>
        <el-form-item label="字典索引编号" >
          <el-input  v-model="formData.keyCode" placeholder="请输入字典索引编号" ></el-input>
        </el-form-item>
      </el-form>
      <div v-if="!showOnly" slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save" >提 交</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="dictValuedialogTitle" :visible.sync="dictValuedialogFormVisible" :before-close="cancel">
      <el-form :model="dictValueformData" label-width="120px" size="mini">
        <el-form-item label="字典索引编号" >
          <el-input disabled  v-model="dictValueformData.keyCode" placeholder="请输入字典索引编号" ></el-input>
        </el-form-item>
        <el-form-item label="字典值名称" >
          <el-input  v-model="dictValueformData.valueName" placeholder="请输入字典值名称" ></el-input>
        </el-form-item>
        <el-form-item label="字典值编号" >
          <el-input  v-model="dictValueformData.valueCode" placeholder="请输入字典值编号" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="dictValueSave" >提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BtnGroup from '@/components/BtnGroup'
import AppTable from '@/components/AppTable'
import {findDictKey, createDictKey, updateDictKey, deleteDictKey, createDictValue} from '@/http/AppApi'
export default {
  data () {
    return {
      tableData: [],
      pageData: {},
      formData: {},
      queryData: {},
      dialogTitle: '',
      dialogFormVisible: false,
      dictValueformData: {},
      dictValuedialogTitle: '编辑字典索引信息',
      dictValuedialogFormVisible: false,
      currentSelectedData: [],
      showOnly: false,
      tableColumns: [
        { label: '字典索引编号', prop: 'keyCode' },
        { label: '字典索引名称', prop: 'keyName' }
      ]
    }
  },
  components: {
    BtnGroup,
    AppTable
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    save () {
      if (this.formData) {
        if (this.formData.id) {
          updateDictKey(this.formData).then(resp => {
            if (resp.code && resp.code === '200') {
              this.getTableData()
              this.cancel()
              this.$message({
                showClose: true,
                message: '修改成功',
                type: 'success'
              })
            }
          })
        } else {
          createDictKey(this.formData).then(resp => {
            if (resp.code && resp.code === '200') {
              this.getTableData()
              this.cancel()
              this.$message({
                showClose: true,
                message: '新增成功',
                type: 'success'
              })
            }
          })
        }
      }
    },
    del (rows) {
      if (rows && rows instanceof Array && rows.length > 0) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rows.forEach(row => {
            deleteDictKey(row).then(resp => {
              if (resp.code && resp.code === '200') {
                this.getTableData()
                this.$message({
                  showClose: true,
                  message: '删除成功',
                  type: 'success'
                })
              }
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    cancel () {
      this.dialogFormVisible = false
      this.formData = {}
      this.dictValuedialogFormVisible = false
      this.dictValueformData = {}
    },
    getTableData () {
      let param = this.queryData
      findDictKey(param).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data) {
            this.pageData = data
            if (this.pageData.items && this.pageData.items instanceof Array) {
              this.tableData = this.pageData.items
            }
          }
        }
      })
    },
    handleCurrentChange (val) {
      this.queryData.offset = (val - 1) * 10
      this.getTableData()
    },
    dictValuAadd (row) {
      this.dictValuedialogTitle = '添加字典值'
      this.dictValuedialogFormVisible = true
      this.dictValueformData.keyCode = row.keyCode
    },
    dictValueSave () {
      if (this.dictValueformData) {
        createDictValue(this.dictValueformData).then(resp => {
          if (resp.code && resp.code === '200') {
            this.getTableData()
            this.dictValuedialogFormVisible = false
          }
        })
      }
    },
    btnClickCallback (callbackData) {
      if (callbackData.btnType === 'delete') {
        this.dialogFormVisible = false
        let rows = callbackData.rows
        this.del(rows)
      } else {
        if (callbackData.btnType === 'post') {
          this.formData = {}
        } else {
          let obj = JSON.stringify(callbackData.rows[0])
          this.formData = JSON.parse(obj)
        }
        this.showOnly = callbackData.sohwOnly
        this.dialogTitle = callbackData.dialogTitle
        this.dialogFormVisible = true
      }
    },
    handleCheckedRows (rows) {
      if (rows && rows instanceof Array && rows.length > 0) {
        this.currentSelectedData = rows
        this.formData = rows[0]
      } else {
        this.currentSelectedData = []
        this.formData = []
      }
    }
  },
  computed: {},
  watch: {}
}
</script>
<style>
</style>
